import {  Button,Collapse } from 'antd';
import React,{ useEffect, useState } from 'react';
import cardStyles from '../index.less';
import styles from './index.less';

import { GlobalState } from '@/models/global';

const {Panel} = Collapse

export interface FixedBarProps {
  global: GlobalState;
  dispatch: any;
  location: any;
}
function ChangeCarDetails(props:any) {
  const {collectFeeList,deductionFeeList} = props
  const [deductionAll,setdeductionAll] = useState(0) // 扣款总额
  const [reductionAll,setreductionAll] = useState(0) // 减免总额
  const [allNum,setAllNum] = useState(0)
  const [allNumState,setAllNumState] = useState('1')
  const customizeHeader = () => (
    <div>
      <div className={styles.tip} />
        换车费用明细
      <span className={styles.value}>{allNumState ==='1'?'需要客户补缴金额/元':'需要退还客户金额/元'}:{allNum}</span>
    </div>
  )
  const calculation = ()=>{
    if(deductionAll>reductionAll){
      setAllNumState('1')
      // setAllNum(deductionAll-reductionAll)
      setAllNum(Number((deductionAll-reductionAll).toFixed(2)))
    }else{
      setAllNumState('2')
      // setAllNum(reductionAll-deductionAll)
      setAllNum(Number((reductionAll-deductionAll).toFixed(2)))
    }
  } // 计算需补交还是退
  useEffect(()=>{
    let num1 = 0 // 欠款
    let num2 = 0 // 剩余账款
    collectFeeList?.forEach((res:any)=>{
      if(res.feeItemAmount==='0.00'){
        res.feeItemAmount = 0
      }
      num1 = Number(res.feeItemAmount)+num1
    })
    deductionFeeList?.forEach((res:any)=>{
      if(res.feeItemAmount==='0.00'){
        res.feeItemAmount = 0
      }
      num2 = Number(res.feeItemAmount)+num2
    })
    setdeductionAll(Number(num1.toFixed(2)))
    setreductionAll(Number(num2.toFixed(2)))
  },[collectFeeList,deductionFeeList])
  useEffect(()=>{
    calculation()
  },[deductionAll])

  return (
    <div className={cardStyles.card}>
        <Collapse
          defaultActiveKey={['1', '2']}
          ghost
          expandIconPosition="end">
             <Panel header={customizeHeader()} key="1">
             <div className={styles.box}>
                <p className={styles.title}>扣款费用项</p>
                <div className={styles.line}>
                  {collectFeeList?.map((res:any)=>(
                      <div className={styles.line_box}>
                      <p className={styles.text}>{res?.feeItemName}:</p>
                      <p className={styles.value}>{res?.feeItemAmount}</p>
                    </div>
                  ))}
                </div>
                <div className={styles.all}>
                  <span>合计：</span>
                  <span>{deductionAll}</span>
                </div>
              </div>
              <div className={styles.box}>
                <p className={styles.title}>减免费用项</p>
                <div className={styles.line}>
                {deductionFeeList?.map((res:any)=>(
                      <div className={styles.line_box}>
                      <p className={styles.text}>{res?.feeItemName}:</p>
                      <p className={styles.value}>{res?.feeItemAmount}</p>
                    </div>
                  ))}
                </div>
                <div className={styles.all}>
                  <span>合计：</span>
                  <span>{reductionAll}</span>
                </div>
              </div>

                </Panel>
            </Collapse>
    </div>
  );
}
export default ChangeCarDetails;
